<template>
  <div>
    <header>
      <svg class="icon" aria-hidden="true" @click="backMeun">
        <use xlink:href="#icon-caidan"></use>
      </svg>
      <h3>Giraffe</h3>
      <svg class="icon" aria-hidden="true" @click="showDropList">
        <use xlink:href="#icon-bianji"></use>
      </svg>
      <ul v-if="showList" class="drop-list">
        <li @click="createGroup">创建团队</li>
        <li @click="joinGroup">加入团队</li>
      </ul>
    </header>
    <v-touch v-if="cards === 0" tag="div" class="cards" v-on:swipeleft="swipeLeft"
    v-on:swiperight="swipeRight">
      <transition-group name="list-complete" tag="div" id="cards"
      class="wrapper">
        <section v-for="(group, index) in card" :key="index" class="card">
          <div class="name">
            <input type="text" :placeholder="group.name">
          </div>
          <div class="money">
            <span class="int">￥{{moneyMap[group.id]}}</span>
            <!-- <span class="dec">00</span> -->
            <span class="des">团队资金</span>
          </div>
          <!-- <span class="invite" @click="invite">邀请更多好友>></span> -->
          <div class="members">
            <div class="wrapper-members">
              <section class="member" v-for="(member, index) in group.memberList" :key="index" >
                <span class="int">￥{{member.money}}</span>
                <!-- <span class="dec">00</span> -->
              </section>
              <!-- <section class="member"></section>
              <section class="member"></section>
              <section class="member"></section>
              <section class="member"></section>
              <section class="member"></section>             -->
            </div>
          </div>
        </section>
      </transition-group>
    </v-touch>
    <div v-else-if="cards === 1" class="cards">
      <div class="wrapper">
        <section class="card">
        <h3>邀请你的朋友一起来玩</h3>
        <div class="way xinxi">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youxiang"></use>
          </svg>
        </div>
        <div class="way weixin">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yingdaicon04"></use>
          </svg>
        </div>
        <div class="way sina">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao214"></use>
          </svg>
        </div>
        <div class="finish" @click="goBack">
          完成>>
        </div>
      </section>
      </div>
    </div>
    <div v-else-if="cards === 2" class="cards">
      <div class="wrapper">
        <section v-if="join === 0" class="card code">
          <p>输入你的邀请码</p>
          <input type="text" placeholder="ABCDE">
          <button @click="goJoin">加入团队>></button>
        </section>
        <section v-else-if="join === 1" class="card">
          <div class="back" @click="cancelJoin">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fanhui"></use>
            </svg>
            <span>取消</span>
          </div>
          <p class="title">成功！欢迎来到<span>此处为用户团队名称团队的名称</span></p>
          <p class="description">请填写你的资料方便朋友在团队中认识你</p>
          <div class="img"></div>
          <input class="yourname" type="text" placeholder="你的名字">
          <div class="next" @click="nextJoin">下一步>></div>
        </section>
      </div>
    </div>
    <div v-else-if="cards === 3" class="cards">
      <div class="wrapper">
        <section class="card">
          <div class="back" @click="cancelCreate">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fanhui"></use>
            </svg>
            <span>取消</span>
          </div>
          <p class="title">成功！欢迎来到<span>此处为用户团队名称团队的名称</span></p>
          <!-- <p class="description">请填写团队名称</p> -->
          <input class="description" v-model="groupName" type="text" placeholder="团队名称">
          <div class="img"></div>
          <input class="yourname" v-model="name" type="text" placeholder="你的名字">
          <div class="next" @click="createMyGroup">创建团队>></div>
        </section>
      </div>
    </div>
    <!-- <router-view class="router-view"></router-view> -->
  </div>
</template>

<script>
import {getGroupInfo, createGroup} from '@/api/group'
import {check} from '@/api/common'

export default {
  name: 'myGroup',
  data () {
    return {
      groupName: '',
      name: '',
      vuegConfig: {
        disable: false,
        forwardAnim: 'fadeInRight',
        backAnim: 'fadeInLeft'
      },                            // vug动画效果
      cardNow: 0,                   // 当前显示的团队
      card: [],                            // 所有团队
      showList: false,
      cards: 0,
      join: 0,
      moneyMap: {}
    }
  },
  computed: {
    cardsLength () {
      return this.card.length - 1
    }
  },
  created () {
    this.initial()
  },
  methods: {
    cancelCreate () {
      this.showList = false
      this.cards = 0
    },
    createGroup () {
      this.showList = false
      this.cards = 3
    },
    joinGroup () {
      this.showList = false
      this.cards = 2
    },
    goJoin () {
      this.showList = false
      this.join = 1
    },
    cancelJoin () {
      this.showList = false
      this.join = 0
    },
    createMyGroup () {
      let formData = {
        data: {
          uid: localStorage.uid,
          name: this.groupName,
          uidName: this.name,
          imgUrl: ''
        },
        token: localStorage.token
      }

      createGroup(JSON.stringify(formData)).then(
        (data) => {
          var result = check(data)
          if (typeof (result) === 'boolean') {
            this.card.splice(0, 0, data.data.data)
          }
        }
      )

      this.showList = false
      this.cards = 0
      this.join = 0
    },
    nextJoin () {
      this.showList = false
      this.cards = 0
      this.join = 0
    },
    goBack () {
      this.showList = false
      this.cards = 0
    },
    showDropList () {
      this.showList = !this.showList
    },
    invite () {
      this.showList = false
      // this.$router.push({
      //   name: 'groupInvite'
      // })
      this.cards = 1
    },                              // 邀请跳转
    backMeun () {
      this.$emit('showMeun')
    },                              // 返回主菜单
    // goSurvey () {
    //   this.$emit('goSurvey')
    // },                              // 创建调查问卷
    swipeLeft () {
      if (this.cardNow < this.cardsLength) {
        this.cardNow++
        this._transCard()
        console.log(this.cardsLength)
      }
    },                              // 左滑
    swipeRight () {
      if (this.cardNow > 0) {
        this.cardNow--
        this._transCard()
      }
    },                              // 右滑
    _transCard () {
      let distance = -92.5 * this.cardNow
      document.getElementById('cards').style.transform = `translateX(${distance}vw)`
    },                              // 切换显示团队
    initial () {
      let formData = {
        data: {
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      getGroupInfo(JSON.stringify(formData)).then(
        (data) => {
          let result = check(data)
          if (typeof (result) === 'boolean') {
            let myCreateGroup = data.data.data.myCreateGroup
            if (typeof (myCreateGroup) !== 'undefined') {
              this.card.push(myCreateGroup)
              let createMoney = 0
              myCreateGroup.memberList.forEach(
                (data) => {
                  createMoney += data.money
                }
              )

              var key = myCreateGroup.id
              this.moneyMap[key] = createMoney
            }

            let myJoinGList = data.data.myJoinGList
            if (typeof (myJoinGList) !== 'undefined' && myJoinGList.length > 0) {
              data.data.myJoinGList.forEach((value, index) => {
                this.card.push(value)
                let joinMoney = 0
                value.memberList.forEach(
                  (data) => {
                    joinMoney += data.money
                  }
                )

                var key = value.id
                this.moneyMap[key] = joinMoney
              })
            }
            //  对card行进排序
            this.card.forEach(
              (obj1, obj2) => {
                return obj1.money - obj2.money
              }
            )
          }
        }
      )
    }                               // 初始化数据
  }
}
</script>

<style lang="scss" scoped>
.drop-list {
  width: 140px;
  background-color: #fff;
  position: absolute;
  top: 80px;
  right: 60px;
  z-index: 999;
  li {
    cursor: pointer;
    list-style: none;
    font-size: 28px;
    margin: 5px;
    text-align: center;
    border-bottom: 2px solid #eee;
  }
}
.back {
  margin: 30px 25px;
  display: flex;
  align-items: center;
  .icon {
    color: #007aff;
    width: 40px;
    height: 40px;
  }
  span {
    color: #007aff;
    font-size: 32px;
  }
}
.title {
  font-size: 40px;
  color: #666;
  margin: 0 auto;
  max-width: 580px;
  text-align: center;
  span {
    font-size: 46px;
    color: #3d68be;
  }
}
.description {
  font-size: 28px;
  line-height: 42px;
  color: #999;
  text-align: center;
  max-width: 306px;
  margin: 60px auto;
}
.img {
  width: 260px;
  height: 260px;
  background-color: #4b539e;
  margin: 20px auto;
}
.yourname {
  border: none;
  width: 215px;
  margin: 60px auto;
  font-size: 54px;
  color: #ccc;
  &::-webkit-input-placeholder {
    font-size: 54px;
    color: #ccc;
  }
}
.next {
  width: 280px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efefef;
  color: #666;
  font-size: 42px;
  margin: 0 auto;
}
.main {
  background-image: linear-gradient(#ffddb4, #3d68be);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  flex: none;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    font-size: 34px;
    color: #5d331e;
  }
  .icon {
    width: 44px;
    height: 44px;
    padding: 0 30px;
    cursor: pointer;
    color: #937200;
  }
}
.cards {
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  h3 {
    text-align: center;
    font-size: 40px;
    color: #666;
    margin-top: 113px;
    // margin-bottom: 100px;
  }
  .way {
    margin: 40px auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 140px;
      height: 140px;
      color: #fff;
    }
    &.xinxi {
      background-color: #3d68be;
      .icon {
        width: 100px;
        height: 100px;
      }
    }
    &.weixin {
      background-color: #31a652;
    }
    &.sina {
      background-color: #e04432;
    }
  }
  .finish {
    margin: 0 auto;
    width: 280px;
    height: 140px;
    background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 42px;
  }
}
.card {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 90vw;
  margin-left: 2.5vw;
  border-radius: 10px;
  background-size: cover;
  transition: all 0.5s;
  background-color: #fff;
}
.wrapper {
  padding-right: 2.5vw;
  margin-left: 2.5vw;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s;
}
.name {
  width: 480px;
  height: 80px;
  background-color: #3d68be;
  color: #fce520;
  margin: 0 auto;
  transform: translateY(-3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  input {
    font-size: 40px;
    text-align: center;
    background-color: rgba($color: #000000, $alpha: 0);
    color: #fff;
    border: none;
    &::-webkit-input-placeholder {
      color: #fff;
    }
  }
}
.money {
  height: 187px;
  margin: 44px auto;
  text-align: center;
  transform: translateY(-40px);
  .int {
    font-size: 120px;
    color: #4d4d4d;
    font-weight: normal;
    letter-spacing: 0;
  }
  .dec {
    display: inline-block;
    transform: translateY(-60px);
    font-size: 36px;
    color: #a5a5a5;
  }
  .des {
    display: block;
    font-size: 32px;
    color: #a5a5a5;
  }
}
.invite {
  text-align: center;
  display: block;
  color: #007aff;
  font-size: 24px;
  cursor: pointer;
}
.wrapper-members {
  width: 560px;
  flex: none;
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.members {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  display: flex;
  margin-top: 40px;
  justify-content: center;
  .member {
    margin-bottom: 40px;
    flex: 0 1 auto;
    width: 260px;
    height: 260px;
    background-color: #3d68be;
    position: relative;
  }
  .int {
    position: absolute;
    bottom: 5px;
    right: 40px;
    font-size: 48px;
    color: #fff;
  }
  .dec {
    color: #fff;
    font-size: 24px;
    right: 10px;
    bottom: 5px;
    position: absolute;
    transform: translateY(-20px);
  }
}
.list-complete-leave-to {
  opacity: 0;
}
.list-complete-leave-active {
  position: absolute;
  height: 100%;
}
.router-view {
  position: absolute;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100%;
  background-color: #fff;
}
.code {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin-top: 150px;
    flex: none;
    font-size: 40px;
    color: #666;
  }
  input {
    margin-top: 130px;
    flex: none;
    width: 200px;
    font-size: 58px;
    color: #333;
    border: none;
  }
  button {
    flex: none;
    margin: 96px 0;
    margin-top: 400px;
    width: 280px;
    height: 140px;
    border: none;
    color: #666;
    font-size: 42px;
    background-color: #efefef;
    border-radius: 5px;
  }
}
</style>
